<template>
	<view class="page">
		<!-- <view class="title">家属信息</view>
		<TInput label="姓名" type="text" v-model="lostInfo.user" /> -->
		<view class="title">遗失人员信息</view>
		<TInput label="姓名" type="text" v-model="lostInfo.lost_name" />
		<TInput label="性别" type="text" v-model="sex" />
		<TInput label="年龄" type="text" v-model="lostInfo.age" />
		<TInput label="出生地" type="text" v-model="lostInfo.birthplace" />
		<TInput label="身高(cm)" type="text" v-model="lostInfo.tall" />
		<TInput label="体重(kg)" type="text" v-model="lostInfo.height" />
		<TInput label="发型" type="text" v-model="lostInfo.hair_style" />
		<TInput label="身型" type="text" v-model="lostInfo.body_style" />
		<TInput label="健康程度" type="text" v-model="lostInfo.physical_state" />
		<TInput label="体型特征" type="text" v-model="lostInfo.bodydis_features" />
		<TInput label="衣服特征" type="text" v-model="lostInfo.dress_features" />
		<TInput label="携带物品" type="text" v-model="lostInfo.personal_effects" />
		<TInput label="遗失时间" type="date" v-model="lostInfo.lost_time" />
		<TInput label="遗失地点" type="text" v-model="lostInfo.lost_place" />
		<view class="column">
			<span>备注：</span>
			<textarea v-model="lostInfo.remarks" />
		</view>
		<view class="column">
			<span>选择图片</span>
			<view class="choose">
				<view v-show="!img_path" @click="select_img">+</view>
				<image v-show="img_path" :src="img_path" mode="aspectFill"></image>
				<view v-show="img_path" @click="del_img">-</view>
			</view>
		</view>
		<view class="btn" @click="send">确定</view>
	</view>
</template>

<script>
	import TInput from './componments/input.vue'
	import {appendPersonLost} from '../../../network/me.js'
	import {IP} from '../../../network/requestUrl.js'
	export default {
		components: {
			TInput
		},
		data() {
			return {
				lostInfo: {},
				img_path: '',
				sex: ''
			};
		},
		methods: {
			tao() {
				console.log(this.lost)
			},
			select_img() {
				uni.chooseImage({
					count: 1
				}).then(res => {
					console.log(res)
					this.img_path = res[1]['tempFilePaths'][0]
					console.log(this.img_path)
				})
			},
			del_img() {
				this.$delete(this.lostInfo, 'img')
				this.img_path = ""
			},
			async send() {
				this.lostInfo.sex = this.sex == "男" ? 1 : 0
				console.log({...this.lostInfo})
				uni.uploadFile({
					url: IP + '/index/Demo/AcceptLost',
					filePath: this.img_path,
					name: 'image',
					formData: {
						...this.lostInfo,
							user: this.$store.state.userInfo.userName
					},
					success: (res) => {
						console.log(res)
						let info = JSON.parse(res.data)
						if(!info.flag) return
						uni.showToast({
							title: '上报成功'
						})
						setTimeout(uni.navigateBack, 1000)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background-color: #FFFFFF;
	
	.title {
		margin: 10px 10px 0;
		text-align: center;
		color: #999999;
	}
	
	.column {
		margin: 10px 10px;
		textarea {
			display: block;
			width: calc(100% - 10px);
			height: 70px;
			padding: 5px;
			margin-top: 10px;
			background: none;
			outline: none;
			border: 1px solid #dddddd;
			border-radius: 3px;
		}
		
		.choose {
			margin-top: 10px;
			display: flex;
			align-items: center;
			view {
				width: 80px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 3px;
				font-size: 50px;
				line-height: 80px;
				color: #999999;
				text-align: center;
			}
			
			image {
				margin-right: 20px;
				width: 80px;
				height: 80px;
			}
		}
	}

	.btn {
		width: 50%;
		margin: 30px auto;
		padding: 10px 0;
		background-color: #1CBAB6;
		color: white;
		text-align: center;
		border-radius: 30px;
		cursor: pointer;
		&:active {
			background-color: #999999;
			color: #333333;
		}
	}
}
</style>
